<template>
    <div style="margin-top: 75px;">
        <h3>各车型总销量占比环型图</h3>
        <div id="thisYear" style="width: 100%;height:400px; margin-top: 75px;"></div>
    </div>
</template>

<script>
    let suvAndMpvSales = {
        data() {
            return {}
        },
        mounted() {
            this.setChart();
        },
        methods: {
            setChart() {
                this.$http({
                    url: this.$http.adornUrl(this.$route.meta['url']),
                    method: 'get',
                }).then(form => {
                    if (form.data.status == "0") {
                        let data = form.data;
                        let thisYear = this.$echarts.init(document.getElementById('thisYear'));
                        // 指定图表的配置项和数据
                        console.log(data);
                        let datum = data['series'].map(e => e['data'][0]);
                        let legend = data['series'].map(e => e['name']);
                        console.log(datum);
                        console.log(legend);
                        let option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)',
                            },
                            legend: {
                                orient: 'vertical',
                                left: 10,
                                data: legend,
                            },
                            series: [
                                {
                                    name: '车型总销量占比',
                                    type: 'pie',
                                    radius: ['50%', '70%'],
                                    avoidLabelOverlap: false,
                                    label: {
                                        show: false,
                                        position: 'center',
                                    },
                                    emphasis: {
                                        label: {
                                            show: true,
                                            fontSize: '30',
                                            fontWeight: 'bold',
                                        },
                                    },
                                    labelLine: {
                                        show: false,
                                    },
                                    data: datum,
                                },
                            ],
                        };
                        thisYear.setOption(option);
                        window.addEventListener('resize', function () {
                            thisYear.resize()
                        });
                    } else {
                        this.$message("数据有误，请等待管理员处理")
                    }
                });
            },
        },
    };
    export default suvAndMpvSales

</script>

<style scoped>

</style>